<template>
    <div class="personalHome">
        <Personal-Header bgColor="#5741d9"></Personal-Header>
        <Personal-Side></Personal-Side>
        <div class="content">
            <h2 class="pagetitle">{{$t('l.personal_55')}}</h2>
            <div class="personCon">
                <div class="infopanel">
                    <h2 class="persontitle">{{$t('l.personal_55')}}<p class="paytip"><i></i>{{$t('l.personal_188')}}！</p></h2>
                    <div class="paymethod">
                        <table class="methodtable">
                            <tr v-if="wechat">
                                <td>{{$t('l.personal_189')}}</td>
                                <td>{{wechat.accountName}}</td>
                                <td>{{wechat.accountNumber}}</td>
                                <td></td>
                                <td>
                                    <router-link :to="{path:'/bindWechat',query: {isEdit: true}}" class="editbtn">{{$t('l.advert_about47b')}}</router-link>
                                </td>
                            </tr>
                            <tr v-else>
                                <td>{{$t('l.market_about4')}}</td>
                                <td>{{wechat.accountName}}</td>
                                <td></td>
                                <td></td>
                                <td>
                                    <router-link :to="{path:'/bindWechat',query: {isEdit: false}}" class="editbtn">{{$t('l.personal_190')}}</router-link>
                                </td>
                            </tr>
                            <tr v-if="payway">
                                <td>{{$t('l.advert_about20')}}</td>
                                <td>{{payway.accountName}}</td>
                                <td>{{payway.accountNumber}}</td>
                                <td></td>
                                <td>
                                    <router-link :to="{path:'/bindPayway',query: {isEdit: true}}" class="editbtn">{{$t('l.advert_about47b')}}</router-link>
                                </td>
                            </tr>
                            <tr v-else>
                                <td>{{$t('l.advert_about20')}}</td>
                                <td>{{payway.accountName}}</td>
                                <td></td>
                                <td></td>
                                <td>
                                    <router-link :to="{path:'/bindPayway',query: {isEdit: false}}" class="editbtn">{{$t('l.add_22')}}</router-link>
                                </td>
                            </tr>
                            <tr v-if="bankintro">
                                <td>{{$t('l.advert_about21')}}</td>
                                <td>{{bankintro.accountName}}</td>
                                <td>{{bankintro.accountNumber}}</td>
                                <td>{{bankintro.bank}}</td>
                                <td>
                                    <router-link :to="{path:'/bindbankcard',query: {isEdit: true}}" class="editbtn">{{$t('l.advert_about47b')}}</router-link>
                                </td>
                            </tr>
                            <tr v-else>
                                <td>{{$t('l.advert_about21')}}</td>
                                <td>{{bankintro.accountName}}</td>
                                <td></td>
                                <td></td>
                                <td>
                                    <router-link :to="{path:'/bindbankcard',query: {isEdit: false}}" class="editbtn">{{$t('l.personal_56')}}</router-link>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!--实名认证弹框-->
        <div class="popWraper" style="display:none;">
            <div class="popInter">
                <div class="popHead">
                    <h2>{{$t('l.personal_95')}}</h2>
                    <i class="close"></i>
                </div>
                <div class="popbody">
                    <div class="popcon">
                        <h2 class="poptitle">{{$t('l.personal_191')}}</h2>
                        <p class="grouptitle">{{$t('l.personal_192')}}</p>
                        <a class="btn allcell" style="margin-top:38px;">{{$t('l.personal_196')}}</a>
                    </div>
                </div>
            </div>
        </div>
        <!--无法编辑弹框-->
        <div class="popWraper" style="display:none;">
            <div class="popInter">
                <div class="popHead">
                    <h2>{{$t('l.personal_193')}}</h2>
                    <i class="close"></i>
                </div>
                <div class="popbody">
                    <div class="popcon">
                        <h2 class="poptitle">{{$t('l.personal_194')}}</h2>
                        <p class="grouptitle">{{$t('l.personal_195')}}</p>
                        <a class="btn allcell" style="margin-top:38px;">{{$t('l.personal_196')}}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import PersonalHeader from "@/components/personalHeader";
import PersonalSide from "@/components/personalSide";
import {api} from '@/api/api';
export default {
    components: {
        PersonalHeader,
        PersonalSide
    },
    data(){
        return {
            payList:[],
            intro:"",
            payway:"",
            wechat:"",
            bankintro:""
        }
    },
    created(){
        this.intro = this.$store.state.userintro;
    },
    methods:{
        async getPayList(){
            let that = this;
            let res = await api.paymentlist({
                pageNum:1,
                pageSize:100
            })
            if(res.data.code==0){
                that.payList = [];
                res.data.data.records.forEach((item,index)=>{
                    if(item.accountType==1){
                        that.payway = item;
                    }else if(item.accountType==2){
                        that.wechat = item;
                    }else{
                        that.bankintro = item;
                    }
                })
            }else{
                that.$layer.msg(res.data.msg);
            }
        }
    },
    mounted(){
        this.getPayList();
    }
}
</script>
<style lang="less">
.personalHome {
	padding-top: 100px;
}
.personCon{
    padding:24px 30px;
    box-sizing: border-box;
    height: 90%;
    .infopanel{
        background:#fff;
        padding:40px 46px 46px 34px;
        min-height: 100%;
        box-sizing: border-box;
        .persontitle{
            .paytip{
                display:inline-block;
                vertical-align:middle;
                font-size:14px;
                font-weight:400;
                color:rgba(247,137,0,1);
                line-height:20px;
                i{
                    display:inline-block;
                    vertical-align:middle;
                    width: 20px;
                    height:20px;
                    background:url(../../assets/images/tip1.png) no-repeat center;
                    margin-left:46px;
                    margin-right:8px;
                }
            }
        }
        .paymethod{
            .methodtable{
                width:100%;
                tr{
                    border-bottom:1px solid rgba(242,246,250,1);;
                }
                td{
                    font-size:14px;
                    font-weight:400;
                    color:rgba(51,56,94,1);
                    line-height:20px;
                    height:72px;
                    &:first-child{
                        padding-left:52px;
                    }
                    &:last-child{
                        text-align:center;
                    }
                }
            }
        }
    }
}
.poptitle{
    font-familyA:"PingFangSC-Medium";
    padding:15px 0 17px;
    font-size:16px;
}
.grouptitle{
    line-height:24px;
}
</style>



